<template>
 <div>
   <div class="recommend-top">热销推荐</div>
   <router-link tag='div' to="/detail" class="recommend-center border-bottom" v-for="item of recommend" :key="item.id">
       <div class="recommend-center-img"><img :src="item.imgUrl" class="img"/></div>
       <div class="recommend-center-text">
         <p class="recommend-center-text-f">{{item.title}}<p>
         <p class="recommend-center-text-s">{{item.desc}}</p>
         <div class="recommend-center-text-t"><span class="recommend-center-text-t-s">￥112</span>起</div>
       </div>
   </router-link>
 </div>
</template>

<script>
export default {
  name: 'Recommend',
  props: {
    recommend: Array
  }
}
</script>

<style lang="stylus" scoped>
 .recommend-top
  height: .8rem
  line-height: .8rem
  background: #eeeeee
  text-indent: .2rem
  margin-top: .1rem
 .recommend-center
  overflow: hidden
  height: 0
  padding-bottom: 25%
  .recommend-center-img
   width: 25%
   height: 1.876rem
   float: left
   .img
    width: 100%
    height: 100%
    box-sizing: border-box
    padding: .2rem
  .recommend-center-text-f
   font-size: .32rem
   font-weight: bold
   margin-top: .2rem
   padding-left: 2.076rem
  .recommend-center-text-s
   margin-top: .1rem
   margin-left: 2.067rem
   opacity: 0.5
  .recommend-center-text-t
   height: .92rem
   line-height: .92rem
   margin-left: 2.076rem
   font-size: .22rem
   .recommend-center-text-t-s
    font-size: .4rem
    color: red
    padding-right: .07rem
</style>
